<template>
    <div>
        <!-- <div class="module">
                <a id="logout" href="javascript:" class="module-bar center-logout" @click="quitlogin()">退出登录</a>
            </div> -->
            <keep-alive>
            <div class="footer-backtop" v-if="!islogin">
                <div class="footer-backtop-cell jsGuestWrapper" style="">
                <strong>登录后获得更多特色功能</strong>
                <span class="char-dot">·</span>
                <router-link to="/login" class="blue jsLogin">立即登录</router-link>
                </div>
                </div>
            </keep-alive>
            
        <footer class="footer">
        <div class="footer-link">
            <a href="javascript:void(0)" class="footer-link-a">客户端</a>
            <a href="javascript:void(0)" class="footer-link-a dark">触屏版</a>
            <a href="javascript:void(0)" class="footer-link-a">电脑版</a>
            <a href="javascript:void(0)" class="footer-link-a">帮助</a>
            <a href="javascript:void(0)" class="footer-link-a">反馈</a>
        </div>
        <div class="footer-copy">
            网站备案/许可证号：<a href="http://beian.miit.gov.cn">沪B2-20080046-1</a>
            <br>
            copyright © 2002-2021 m.qidian.com
        </div>
    </footer>
    <a id="footerApp" href="//qidian.gtimg.com/QDReader/app/showBook?query=%7B%22bookId%22%3A1025750016%7D&amp;redirect=http%3A%2F%2Fdownload.qidian.com%2Fapknew%2Fsource%2FQDReaderAndroid.apk" class="footer-app jsDownloadLink" data-l1="40" data-eid="mqd_A52">
        <img src="https://qidian.qpic.cn/qidian_common/349573/c261eee92f0e2a9835a7a77437db163d/0" style="position: absolute; top: .75rem;     width: 2.25rem; height: 2.25rem; left: 1rem;">
        <h3 class="footer-app-h">安装起点读书客户端</h3>
        <p class="footer-app-p">看更多正版好书</p>
        <span class="btn-primary-small">下载</span>
    </a>
    </div>
</template>
<script>
export default {
    data() {
        return {
            islogin:false
        }
    },
    watch:{
        $route() {
            this.islogin=false;
            if(window.sessionStorage.getItem("login")){
                console.log(window.sessionStorage.getItem("login"));
            this.islogin=true;
        }
        
        }   
    },
    created(){       
        if(window.sessionStorage.getItem("login")){
            this.islogin=true;
        }
        console.log(this.islogin);
    },
    mounted(){
        this.$nextTick(()=>{
            if(window.sessionStorage.getItem("login")){
            this.islogin=true;
        }
        })
    }
}
</script>
<style lang="less">
.footer {
  background-color: #fff;
}

.footer-link {
  font-size: .875rem;
  display: flex;
//   display: -webkit-box;
//   display: box;
  padding: .5625rem 1.1875rem 0;
  text-align: center;
  color: #969ba3;
  justify-content: space-between;
//   -webkit-box-pack: justify;
  box-pack: justify;
}

.dark {
  color: #33373d;
}

.footer-link-a {
  display: block;
  padding: .5rem 0;
  -webkit-box-flex: 1;
  box-flex: 1;
}

.footer-copy {
  font-size: .75rem;
  font-weight: 300;
  padding-top: .25rem;
  padding-bottom: 1rem;
  text-align: center;
  color: #969ba3;
}

.footer-app {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 3.75rem;
  padding: .75rem 6rem 0 4rem;
  background-color: #f6f7f9;
}

.footer-app-h {
  font-size: .875rem;
}

.footer-app-p {
  font-size: .75rem;
  color: #969ba3;
}

.footer-app .btn-primary-small {
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  height: 1.625rem;
  margin: auto;
}

.btn-primary, .btn-primary-small {
  font-size: .875rem;
  // line-height: 2.25rem;
  display: inline-block;
  padding-right: 1em;
  padding-right: 2ch;
  padding-left: 1em;
  padding-left: 2ch;
  text-align: center;
  color: #fff;
  border-radius: 99px;
  background-color: #ed424b;
}

.btn-primary-small {
  line-height: 1.625rem !important;
}
.module {
  margin: .75rem 0;
  background-color: #fff;
}
.module-bar {
  font-size: .8125rem;
  line-height: 2.75rem;
  text-align: center;
  color: #969ba3;
  background-color: #f6f7f9;
}

.center-logout {
  font-size: .875rem;
  display: block;
  color: #ed424b;
  background: 0 0;
}
.footer-backtop {
    display: table;
    width: 100%;
    text-align: center;
}
.footer-backtop-cell {
    font-size: .875rem;
    line-height: 3.4375rem;
    display: table-cell;
    padding: 0 1rem;
    border-bottom: 1px solid #f0f1f2;
}
.char-dot, .char-pipe {
    font-family: Georgia,Helvetica,Arial;
    padding: 0 .5ch;
}
.blue {
    color: #4284ed;
}
strong {
    font-weight: bold;
}
</style>